<template>
  <div class="formPage"  style="height: 100%">
    <el-scrollbar style="height: 100%">
      <el-row :gutter="15">
        <el-col
          :span="element.colSpan"
          class="colSpan"
          v-for="(element, index) in componentsList"
          :key="index"
        >
          <InputView :childData="element" :formParams="formParams" v-if="element.type == 'Input'" />
          <InputNumberView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'InputNumber'"
          />
          <TextAreaView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'TextArea'"
          />
          <SelectRadioView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'SelectRadio'"
          />
          <SelectMultipleView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'SelectMultiple'"
          />
          <ButtonRadioView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'ButtonRadio'"
          />
          <ButtonCheckboxView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'ButtonCheckbox'"
          />
          <DatePickerView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'DatePicker'"
          />
          <DateRangeView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'DateRange'"
          />
          <CascaderView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'Cascader'"
          />
          <UploadFileView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'UploadFile'"
          />
          <UploadImageView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'UploadImage'"
          />
          <SwitchView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'Switch'"
          />
          <SliderView
            :childData="element"
            :formParams="formParams"
            v-if="element.type == 'Slider'"
          />
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>
 
<script setup>
import InputView from "../componentView/Input.vue";
import InputNumberView from "../componentView/InputNumber.vue";
import TextAreaView from "../componentView/TextArea.vue";
import SelectRadioView from "../componentView/SelectRadio.vue";
import SelectMultipleView from "../componentView/SelectMultiple.vue";
import ButtonRadioView from "../componentView/ButtonRadio.vue";
import ButtonCheckboxView from "../componentView/ButtonCheckbox.vue";
import DatePickerView from "../componentView/DatePicker.vue";
import DateRangeView from "../componentView/DateRange.vue";
import CascaderView from "../componentView/Cascader.vue";
import UploadFileView from "../componentView/UploadFile.vue";
import UploadImageView from "../componentView/UploadImage.vue";
import SwitchView from "../componentView/Switch.vue";
import SliderView from "../componentView/Slider.vue";

const props = defineProps({
  componentsList: {
    type: Object,
    default: () => []
  },
  formParams: {
    type: Object,
    default: () => {}
  }
});
</script>

<style scoped>
.colSpan {
  margin-bottom: 15px;
}
</style>
